<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/order/order_detail.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back">
				<img src="../../img/order/back.png" alt=""/>
			</a>
		    <h1 class="mui-title">订单详情</h1>
		</header>
		<div class="mui-content">		   		   
     	    <div class="main">		    	
		    	<div class="main_two">
		    		<div class="main_two_list">
		    			<div class="two_list_top">
		    				<p><img src="../../img/user/meituan.png"/></p>
		    				<p>
		    					<span>美团外卖</span>
		    					<span class="mui-ellipsis">000000000000000</span>
		    				</p>
		    				<p class="add">
		    					追加小费
		    				</p>
		    			</div>
		    			<div class="two_list_two">
	    					<p>配送地址:</p>
	    					<p class="tel">
	    						<span>
	    							<i>小明</i>
	    							<i>18000000000</i>
	    							<a href="tel:00000000000"><img src="../../img/order/iphone.png" alt="" /></a>
	    						</span>
	    						<span>中原国家广告产业园7号楼3层</span>
	    					</p>
	    					<div style="clear: both;"></div>
		    			</div>
		    			<div class="two_list_three">
		    				<ul>
		    					<li>
		    						<span class="mui-ellipsis">西红柿炒鸡蛋盖浇饭</span>
		    						<span>x1</span>
		    						<span>￥9</span>
		    					</li>
		    					<li>
		    						<span class="mui-ellipsis">西红柿炒鸡蛋盖浇饭</span>
		    						<span>x1</span>
		    						<span>￥9</span>
		    					</li>		    					
		    					<li>
		    						<span class="mui-ellipsis">西红柿炒鸡蛋盖浇饭</span>
		    						<span>x1</span>
		    						<span>￥9</span>
		    					</li>
		    					<li>
		    						<span class="mui-ellipsis">西红柿炒鸡蛋盖浇饭</span>
		    						<span>x1</span>
		    						<span>￥9</span>
		    					</li>
		    					<li>
		    						<span class="mui-ellipsis">西红柿炒鸡蛋盖浇饭</span>
		    						<span>x1</span>
		    						<span>￥9</span>
		    					</li>
		    					<li>
		    						<span class="mui-ellipsis">西红柿炒鸡蛋盖浇饭</span>
		    						<span>x1</span>
		    						<span>￥9</span>
		    					</li>
		    					<li>
		    						<span>西红柿炒鸡蛋盖浇饭</span>
		    						<span>x1</span>
		    						<span>￥9</span>
		    					</li>
		    				</ul>
		    				<p class="more">
		    					<span>展开更多</span>
		    					<img src="../../img/order/xiala.png" alt="" />
		    				</p>
		    				<div class="pay">
		    					<p>
		    						<span>商品费</span>
		    						<span>￥58</span>
		    					</p>
		    					<p>
		    						<span>商品费</span>
		    						<span>￥5</span>
		    					</p>
		    				</div>
		    				<div class="zongJi">
		    					<span>总计：</span>
		    					<span>￥61</span>
		    				</div>
		    			</div>
		    		    <div class="two_list_fore tel">
		    		    	<img src="../../img/order/dianhua.png"/>
		    		    	<span>联系买家</span>
		    		    </div>		    		    
		    		</div>
		    	</div>
		        <div class="main_three">
		        	<p style="width: 60%;">
		        		<span style="width:35%;display: inline-block;">订单编号</span>
		        		<span class="mui-ellipsis" style="width:63%;display: inline-block;">12345678978976546</span>
		        	</p>
		        	<p>
		        		<span>期望时间</span>
		        		<span>45分钟内</span>
		        	</p>
		        	<p>
		        		<span>订单时间</span>
		        		<span>2017-06-30  18:37:56</span>
		        	</p>
		        	<p>
		        		<span>备注</span>
		        		<span class="mui-ellipsis">不要辣椒，不要青菜</span>
		        	</p>
		        	<p class="wait_order">等待抢单<span class="djs"></span></p>
		        </div>
     	    </div>		    
		</div>	
		<div class="phone_pop">
			<div class="phone">
				<p>18000000000</p>
				<p>
					<a class="cancel">取消</a>
					<a href="tel:123456789">呼叫</a>
				</p>
			</div>			
		</div>
		<div class="quxiao_pop">
			<div class="quxiao">
				<p>确定订单取消将要扣取佣金</p>
				<p>
					<a class="enter" style="color: #666;">确认</a>
					<a class="cancel">取消</a>
				</p>
			</div>			
		</div>
		<div class="qxOrder_pop">
			<div class="qxOrder">
				<p>请选择取消订单的原因</p>
				<p class="qx">买家取消</p>
				<p class="qx">商家自己配送</p>
				<p class="qx">没有骑手接单</p>
				<div class="finished">完成</div>
			</div>			
		</div>
		<!--追加小费弹框-->
        <div class="addPay_pop">
			<div class="addPay">
				<p>请输入小费金额</p>
				<p><input type="text" value="￥" class="jine"/></p>
				<p>
					<a class="enter" style="color: #666;">确认</a>
					<a class="cancel">取消</a>
				</p>
			</div>			
		</div>
		<nav class="mui-bar mui-bar-tab">
		   <p class="cancel_order" style="width: 100%;">取消订单</p>
		</nav>
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-1.7.2.js"></script>
		<script src="../../js/tiaozhuan.js"></script>
		<script src="../../js/order/order_detail.js"></script>
		<script type="text/javascript">
			mui.init();
			
		</script>
	</body>

</html>